<!DOCTYPE HTML>
<html>
<head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <title>注册用户</title>
    <#--<meta name="keywords" content="关键词,5个左右,单个8汉字以内">-->
    <meta name="keywords" content="注册，碧叶之源" />
    <#--<meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！">-->
    <meta name="description" content="碧叶之源注册！" />



<#--妹子UI-->
    <link type="text/css" rel="stylesheet" href="/plugin/amaze/css/amazeui.min.css" />
    <link type="text/css" rel="stylesheet" href="/plugin/amaze/css/amazeui.datatables.min.css" />
    <link type="text/css" rel="stylesheet" href="/plugin/amaze/css/app.css">
<#--自己的样式-->



</head>


<body data-type="login">



<div class="tpl-login">
    <div class="tpl-login-content">
        <div class="tpl-login-title" style="text-align: center">注册用户</div>

            <form class="am-form tpl-form-line-form" method="post" id="userForm" style="width: 300px; margin:0 auto;" enctype ="multipart/form-data">
                <#--隐藏域-->
                <input type="hidden" name="createType" value="1"/>

                <div class="am-form-group">
                    <input type="text" name="logName"  id="logName" class="tpl-form-input" placeholder="输入登录用户名">
                </div>

                <div class="am-form-group">
                    <input type="password" id="password" name="password" class="tpl-form-input" placeholder="设置个密码吧">
                </div>

                <div class="am-form-group">
                    <input type="password" id="password1" name="password1" class="tpl-form-input" placeholder="请再次输入密码">
                </div>

                <div class="am-form-group">
                    <input type="text" name="name"  id="name" class="tpl-form-input" placeholder="输入姓名">
                </div>

                <div class="am-form-group">
                    <label for="doc-ipt-email-1" style="color: #E0ECF9">头像上传</label>
                    <input type="file" id="imgHredFile" class="tpl-form-input" name="imgHredFile" >
                    <!-- 预览的图片 -->
                    <div id="container">

                    </div>
                </div>

                <div class="am-form-group tpl-login-remember-me">
                    <label class="am-radio-inline">
                        <input type="radio" name="sex" value="1"> 男
                    </label>
                    <label class="am-radio-inline">
                        <input type="radio" name="sex" value="2"> 女
                    </label>
                </div>


                <div class="am-form-group">
                    <input class="tpl-form-input" type="text" name="verifyCode" id="verifyCode" placeholder="请输入验证码" style="width: 150px;float: left;">
                    <img style="margin-left: 10px;" id="codeImage" src="${request.contextPath}/user/getVerifyCode" onclick="replaceCode()" title="图片看不清？点击重新得到验证码"/>
                </div>

                <p><button type="button" class="am-btn am-btn-primary  am-btn-block tpl-btn-bg-color-success  tpl-login-btn" onclick="submitUserFrom()">点击注册</button></p>


            </form>

    </div>
</div>




    <#--JS 部分 -->
    <script type="text/javascript" src="/js/common/jquery.min.js" ></script>
    <script type="text/javascript" src="/js/common/base.js" ></script>
    <#--可实现表单和文件一起上传的插件-->
    <script type="text/javascript" src="/js/common/jquery-form.js" ></script>
    <#--妹子UI-->
    <script type="text/javascript" src="/plugin/amaze/js/amazeui.min.js"></script>
    <script type="text/javascript" src="/plugin/amaze/js/app.js"></script>

    <script type="text/javascript" src="/plugin/amaze/js/theme.js"></script>

    <script>


        $(function() {

            /**
             * 点击上传文件后文件会加载到 file-list 这个div下
             */
            $('#imgHredFile').on('change', function() {
                var fileNames = '';
                $.each(this.files, function() {
                    fileNames += '<span class="am-badge">' + this.name + '</span> ';
                });
                $('#imgHredFile').html(fileNames);

                //预览图片
                preview();
            });

        });

        /**
         * 预览图片的配置，相关的封装在base.js
         */
        function preview(){
            var config = {
                tip: "请上传格式为png, gif或者jpg的图片",
                fileId: "imgHredFile", //文件上传 input 的那个 id
                containerId: "container", //预览图片的容器的ID
                imgStyle: "width:75px;height:75px;border-radius:100px" //预览图的样式
            };
            var previewer = new ImgPrevirewer(config);
            previewer.preview();
        }


        /**
         * 注册用户
         * 使用jquery.form.js 提交表单，同时可以上传文件
         */
        function submitUserFrom() {
            var options = {
                url:'${request.contextPath}/user/registerUser',
                type:'POST',
                beforeSubmit: checkSub, //提交前处理的函数，也可以在这里写,注意，这里接收的只能是false和true，且不能是函数的名带括号的，false时表单不会提交
                dataType:'json', //返回的数据类型：null、"xml"、"script"、"json"其中之一。
                clearForm:false, //表示如果表单提交成功是否清除表单数据。
                success:function(data){ //提交完后执行的函数
                    if (data.status == "success"){
                        alert("注册成功");
                        window.open("${request.contextPath}/user/loginUserUrl", "_self");
                    } else if (data.status == 'error'){
                        alert(data.msg);
                    } else {
                        alert("未知情况");
                    }
                },
                error : function(){
                    alert("错误！！");
                }
            };

            //使用ajaxForm()插件提交form表单
            $("#userForm").ajaxSubmit(options);
        }

        /**
         * 表单提交前的检查
         */
        function checkSub() {
            var logName = $("#logName").val();
            if (checkNull(logName)){
                alert("登录用户名是必填项");
                return false;
            }

            var password = $("#password").val();
            if (checkNull(password)){
                alert("密码是必填项");
                return false;
            }
        }
    </script>

</body>



</html>
